<template>
  <div class="app-container">
    <el-card class="box-card" :body-style="{ margin:'50px auto 0',width:'600px'}">
      <!-- query -->
      <el-form ref="modifyPasswordForm" :rules="rules" :model="modifyPassword" label-width="120px">
        <el-form-item label="当前账号:">
          <el-input v-model="modifyPassword.userName" :disabled="true" />
        </el-form-item>
        <el-form-item label="输入原始密码:" prop="oldPassword">
          <el-input v-model="modifyPassword.oldPassword" type="password" clearable placeholder="请输入原始密码" />
        </el-form-item>
        <el-form-item label="输入新密码:" prop="newPassword">
          <el-tooltip placement="right-start" effect="dark" :hide-after="2500">
            <div slot="content">
              新密码必须为字母、数字、大小写的组合；
              <br>
              不少于8位，不大于20位；不可与原密码相同
            </div>
            <el-input ref="newPassword" v-model="modifyPassword.newPassword" :type="newPasswordType" placeholder="请输入新密码" auto-complete="on" />
          </el-tooltip>
          <span class="show-pwd" @click="showPwd('new')">
            <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
          <!-- <div style="padding-top: 4px;">
            <span style="color: rgb(250, 181, 42);display:inline-block;font-size:14px;line-height:1.4em;vertical-align:middle;">新密码必须为字母、数字、符号、大小写的组合；不少于8位，不大于20位；不可与原密码相同</span>
          </div> -->
        </el-form-item>

        <el-form-item label="确认新密码:" prop="checkNewPassword">
          <el-input ref="checkPassword" v-model="modifyPassword.checkNewPassword" :type="checkPasswordType" placeholder="请确认新密码" auto-complete="on" />
          <span class="show-pwd" @click="showPwd('check')">
            <svg-icon :icon-class="checkPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="updatePassword">确定</el-button>
          <!-- <el-button @click="resetForm('roleQueryForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { aesEncrypt } from '@/utils/crypto.js'

export default {
  name: 'ModifyPassword',
  data() {
    return {
      newPasswordType: 'password',
      checkPasswordType: 'password',
      modifyPassword: {
        userName: '',
        oldPassword: '',
        newPassword: '',
        checkNewPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入原始密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 8, max: 20, message: '新密码不少于8位，不大于20位', trigger: 'blur' },
          { pattern: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: '新密码必须为字母、数组、大小写的组合', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value === this.modifyPassword.oldPassword) {
              callback('新密码不可与原密码相同')
            }
            callback()
          }, trigger: 'blur'
          }
        ],
        checkNewPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value && value !== this.modifyPassword.newPassword) {
              callback('两次输入不一致！')
            }
            callback()
          }, trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.modifyPassword.userName = this.name
  },
  methods: {
    showPwd(type) {
      if (type === 'new') {
        if (this.newPasswordType === 'password') {
          this.newPasswordType = 'text'
        } else {
          this.newPasswordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.newPassword.focus()
        })
      } else if (type === 'check') {
        if (this.checkPasswordType === 'password') {
          this.checkPasswordType = 'text'
        } else {
          this.checkPasswordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.checkPassword.focus()
        })
      }
    },
    updatePassword() {
      this.$refs['modifyPasswordForm'].validate((valid) => {
        console.log(aesEncrypt(this.modifyPassword.newPassword))
      })
    }
  }
}
</script>
<style scoped>
.box-card{
  width: 1200px;
  height: 600px;
  margin: auto;
  padding: 20px;
  border-radius: 2px;
}
.show-pwd {
    position: absolute;
    right: 10px;
    top: 1px;
    font-size: 16px;
    cursor: pointer;
    color:#889aa4;
    user-select: none;
  }
</style>
